<template>
	<view class="historinfo">
		<view class="steps">
			<p class="biaoyu">快速报单，服务马上到</p>
			<u-steps :current="current" activeColor="#ff9c24" inactiveColor="#ffffff">
				<u-steps-item title="已报修"></u-steps-item>
				<u-steps-item title="已接单"></u-steps-item>
				<u-steps-item title="已预约"></u-steps-item>
				<u-steps-item title="已到达"></u-steps-item>
				<u-steps-item title="维修完成"></u-steps-item>
				<u-steps-item title="已评价"></u-steps-item>
			</u-steps>
		</view>
		<!-- <view class="detail">
			<p>查看订单详细</p>
			<p>查看</p>
		</view> -->
		<view class="histor_list">
			<view class="list_title">流程进度：</view>
			<view class="list_content">

				<u-steps current="0" direction="column" dot>
					<u-steps-item v-for="(item, index) in list" :key="index" :title="item.stateName+' '+item.orderTime">
						<!-- {{`${item.remark}${item.state==6?'点击查看评价':item.state==5?'查看服务详情':item.state==3?'查看预约日志':''}`}} -->
						<view class="slot-desc" slot="desc">
							<view>
								<span>{{item.remark}}</span>
								<span style="color: #3c9cff;text-decoration: underline;" @click="toDetail(item.state)">
									{{item.state==6?'点击查看评价':item.state==4?`维修师：${item.repairName}`:''}}
									<!-- {{item.state==6?'点击查看评价':item.state==5?'查看服务详情':item.state==4?`[维修师]:${item.repairName}`:item.state==3?'查看预约日志':''}} -->
								</span>
							</view>
						</view>
					</u-steps-item>
				</u-steps>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dateTimeFormat
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				list: [],
				orderNo: '',
				itemObj:{},
				current:0
			};
		},
		onLoad(options) {
			this.itemObj = JSON.parse(options.item)
			this.orderNo = this.itemObj.orderNo
			let data = {
				orderNo: this.orderNo
			};
			this.$newapi.getRepairLogs(data).then((res) => {
				if (res.code == 200) {
					this.list = res.data
					this.list.forEach(item => {
						item.orderTime = dateTimeFormat(item.createDate)
						item.stateName = item.state == 1 ? '已报修' : item.state == 2 ? '已接单' : item.state == 3 ? '已预约' : item.state == 4 ? '已到达' : item.state == 5 ? '维修完成' : '已评价'
					})
					this.list.sort((a, b) => b.state - a.state);
					this.current = this.list[0].state - 1
				} else {
					toast('网络连接失败，请稍后重试')
				}
			}).catch((err) => {
				toast('网络连接失败，请稍后重试')
			});
		},
		methods: {
			toDetail(state) {
				let url = '';
				switch (state) {
					case 3:
						url=`/pagesIndex/detail/detail?state=3&item=${JSON.stringify(this.itemObj)}`
						break;
					case 4:
						url=`/pagesIndex/detail/detail?state=4&item=${JSON.stringify(this.itemObj)}`
						break;
					case 5:
						url=`/pagesIndex/detail/detail?state=5&item=${JSON.stringify(this.itemObj)}`
						break;
					case 6:
						url=`/pagesIndex/detail/detail?state=6&item=${JSON.stringify(this.itemObj)}`
						break;
				}
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	::v-deep .u-steps-item__content{
		margin-left: 0 !important;
	}
	.historinfo {
		width: 100%;
		height: 100%;
		background: #f3f7fd;

		.steps {
			background: linear-gradient(to bottom, #0d9eec, #32baf9);
			padding: 30rpx 10rpx;
			border-radius: 20rpx;
			margin: 20rpx;

			::v-deep .u-icon__icon {
				font-size: 32rpx !important;
				line-height: 32rpx !important;
				color: #fff !important;
			}

			::v-deep .u-text__value--content,
			::v-deep .u-text__value--main,
			::v-deep .u-text__value {
				color: #fff !important;
			}

			::v-deep .u-steps-item__wrapper__circle__text {
				// color: #111 !important;
				font-size: 28rpx !important;
			}

			::v-deep .u-steps-item__wrapper__circle {
				border-color: #ffffff !important;
				width: 52rpx !important;
				height: 52rpx !important;
				// background-color:transparent !important;
			}

			::v-deep .u-steps-item__wrapper {
				background: transparent !important;
			}

			::v-deep .u-steps-item__line {
				background: #ddd !important;
				width: 50% !important;
				left: 75% !important;
			}

			.biaoyu {
				color: #fff;
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 30rpx;
			}
		}
	}
	
	.detail{
		background: linear-gradient(#c0dfff, #fff);
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}
	
	.histor_list {
		width: 100%;
		// height: 575rpx;
		margin-top: 30rpx;
		background-color: #fff;
	}

	.list_title {
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: left;
		font-size: 32rpx;
		color: black;
		font-weight: 600;
		margin: 0 auto;
	}

	.list_content {
		width: 90%;
		margin: 0 auto;
		overflow: auto;

		::v-deep .u-steps-item--column {
			padding-bottom: 20rpx !important;
		}

		::v-deep .u-text__value--content {
			color: #111 !important;
			font-size: 28rpx !important;
			margin-bottom: 10rpx;
		}

		::v-deep .u-text__value--main {
			color: #3c9cff !important;
			font-size: 30rpx !important;
			font-weight: 600 !important;
			margin-bottom: 10rpx;
		}

		.slot-desc {
			color: #777;
			margin: 24rpx 0;
			font-size: 26rpx;
		}
	}
</style>